<template>
    <div class="bigDeal-table-container">
        <div class="th-head th-td">
            <div class="th1">{{ $t("message.Clever_Deal.c") }}</div>
            <div class="th2">{{ $t("message.Clever_Deal.f") }}</div>
            <div class="th3">{{ $t("message.Clever_Deal.g") }}</div>
            <div class="th4">{{ $t("message.Clever_Deal.h") }}</div>
            <div class="th5">{{ $t("message.Clever_Deal.e") }}</div>
            <div class="th6"></div>
        </div>
        <div class="th-Empty" v-if="listArr.length == 0">
            <JEmpty></JEmpty>
        </div>
        <div class="th-table" v-else>
            <div class="th-row th-td" v-for="(item, index) in listArr" :key="index">
                <div class="th1">
                    <img class="coin-img" :src="tokens.getImg(item.s)" alt="" @error="loadErr">
                    <div class="coin-name" @click="toDetail(item)">
                        <span class="coin-1">{{ commFun.getForm(true, item.s) }}</span>
                        <span class="coin-2">/{{ commFun.getForm(false, item.s) }}</span>
                    </div>
                </div>
                <div class="th2">
                    <div>${{ item.p }}</div>
                </div>
                <div class="th3">
                    <JNumber :num="item.r" is-color notbold suffix="%" origin></JNumber>
                </div>
                <div class="th4">
                    <div>{{ formatBigNumber(item.t) }}</div>
                </div>
                <div class="th5">
                    <TimeTips :text="formatTimestamp(Number(item.T))">{{ formatTimeAgo(item.T) }}</TimeTips>
                </div>
                <div class="th6">
                    <YexTent :level="item.L" :dir="item.d == 'SHORT'"></YexTent>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, onUnmounted, computed } from "vue";
import { useRank } from "@/stores/rank";
import { commFun } from "@/views/ranks/script/comm";
import JEmpty from "@/components/j-empty/index.vue";
import JNumber from "@/components/j-number/index.vue";
import BankIcon from "../icon/shouye.svg";
import YexTent from "@/components/y-extent/index.vue";
import { useTokens } from "@/stores/tokens";
import { formatBigNumber, formatTimeAgo, formatTimestamp } from "@/comm/format";
import { get } from "@/comm/request";
import { URL_SIGNAL_BIG_AMOUNT_MORE } from "@/comm/api";
import { useCore } from "@/hooks/useCore";
import { sortList } from "@/comm/tooler";
import TimeTips from "@/components/timeTips/index.vue";
import { useLayout } from "@/stores/layout";
import JLoding from "@/components/j-loding/index.vue";
import { useRouter } from "vue-router";
import { page } from "@/views/clever/dateAlter/components/scripts/tabList";
let layout = useLayout()
const router = useRouter();
const pages = ref({
    pageNumber: 1,
    pageSize: 30,

})
const isMore = ref<Boolean>(true)
const tokens = useTokens();
const rank = useRank();
const core = useCore();

onMounted(() => {
    update();
    document.getElementById('rout-page')?.addEventListener('scroll', scrollFn)
});
onUnmounted(() => {
    document.getElementById('rout-page')?.removeEventListener('scroll', scrollFn)
});
function toDetail(e:any){
    // console.log('点击详情',e)
    router.push(`/coin/${e.s}`);
}
function scrollFn() {
    const element = document.getElementById('rout-page');
    if (element!.scrollTop + element!.clientHeight >= element!.scrollHeight) {
        if (isMore.value) {
            console.log('触底加载!!!!!!!!!')
            pages.value.pageNumber += 1
            update()
        } else {
            console.log('没有更多了')
        }
    }
}
const listArr = computed(() => {
    let ary = [...rank.REAL_TIME_BIG_TURNOVER_MORE];
    sortList(ary, "T");
    // console.log(ary)
    console.log('所有大额交易数据', ary)
    return ary
})

function loadErr(e: any) {
    e.target.src = "/coin.svg"
}
const update = () => {
    get(URL_SIGNAL_BIG_AMOUNT_MORE, pages.value).then((res: any) => {
        console.log('获取更多大额交易', res)
        let ary = res?.data || [];
        if (ary.length > 0) {
            rank.changeBIG_TURNOVER_MORE(ary);
        } else {
            isMore.value = false
        }
    });
};

const onCoin = (str: string) => {
    // window.open("/coin/" + str);
    core.switchCoinByName(str);
};
</script>

<style lang="scss" scoped>
.bigDeal-table-container {
    display: flex;
    flex-direction: column;
    width: 792px;
    .th-Empty{
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .th-table{
        position: relative;
    }
    .th-head {
        color: var(--color);
        font-size: 12px;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }
    .th-row{
        border-bottom: 1px solid var(--border);
    }
    .th-td {
        height: var(--row-height);
        display: flex;
        align-items: center;
        padding: 0 15px 0 15px;

        .th1 {
            display: flex;
            flex: 1.7;

            .coin-img {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                margin-right: 8px;
            }

            .coin-name {
                font-size: 14px;

                &:hover {
                    cursor: pointer;
                    text-decoration: underline;
                }

                .coin-1 {
                    color: #FFFFFF;
                }

                .coin-2 {
                    color: var(--color-2);
                }
            }

        }

        .th2 {
            flex: 1.7;
        }

        .th3 {
            flex: 1.2;
        }

        .th4 {
            flex: 1.1;
        }

        .th5 {
            flex: 1.1;
            display: flex;
            justify-content: flex-end;
        }

        .th6 {
            flex: 1;
            display: flex;
            justify-content: flex-end;
        }

    }
}
</style>
